<template>
  <!--  :style="[$parent.getTitleDirStyle, getModBottom]"-->
  <r-operator
    class="experience"
    :operators="['drag', 'add', 'skin', 'setting']"
    @add="onAdd"
    @setting="isShowSetting = !isShowSetting"
    @skin="isShowSkin = !isShowSkin"
  >
    <r-title icon="work" :isShow="isTitleShow" v-model="title" />
    <div
      class="experience__content"
      :style="{ '--columns': settingList.columns }"
    >
      <div
        class="experience__content__item"
        :key="item.id"
        :class="`experience__content__item--${settingList.columns}`"
        v-for="(item, index) in dataList"
      >
        <div
          class="experience__content__item__operator"
          v-if="dataList.length > 1"
        >
          <i
            class="resume resume-up"
            :class="{ 'resume-icon--activated': index !== 0 }"
            @click="onUp(index)"
          />
          <i
            class="resume resume-down"
            :class="{ 'resume-icon--activated': index !== dataList.length }"
            @click="onDown(index)"
          />
          <i class="resume resume-delete" @click="onDel(index)" />
        </div>
        <div
          :class="{
            'experience__content__item__top--large': settingList.columns === 1,
          }"
        >
          <r-input hint="填写时间" v-model="item.time" />
          <r-input hint="填写公司名字" v-model="item.company" />
          <r-input bold hint="填写职位名称" v-model="item.call" />
        </div>
        <r-input
          v-model="item.content"
          hint="详细描述你的职责范围、工作任务及取得的成绩，工作经验的时间采取倒叙形式，最近经历写在前面，描述尽量具体简洁，工作经验的描述与目标岗位的招聘要求尽量匹配，用词精准。"
        />
      </div>
    </div>

    <!--换版-->
    <skin
      v-model="settingList.columns"
      v-if="isShowSkin"
      @mouseleave="isShowSkin = false"
    />

    <!--设置-->
    <r-setting
      v-model="settingList.switchLs"
      v-show="isShowSetting"
      @mouseleave="isShowSetting = !isShowSetting"
    />
  </r-operator>
</template>

<script>
import RInput from "@/components/base/RInput";
import RTitle from "@/components/base/RTitle";
import ROperator from "@/components/base/ROperator";
import RSetting from "@/components/base/RSetting";
import { ref } from "vue";
import useData from "../useData";
import Skin from "./skin";

const swapData = (dir, fromIdx, dataList) => {
  const toIdx = fromIdx + dir;
  if (toIdx >= 0 && toIdx < dataList.length) {
    [dataList[fromIdx], dataList[toIdx]] = [dataList[toIdx], dataList[fromIdx]];
  }
};
export default {
  name: "Experience",
  components: { Skin, RTitle, RInput, ROperator, RSetting },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const baseData = useData(props.id);
    const isShowSetting = ref(false);
    const isShowSkin = ref(false);
    const onAdd = () =>
      baseData.dataList.value.push({ time: 2002, call: "", company: "" });
    const onDel = (index) => baseData.dataList.value.splice(index, 1);
    const onMove = (dir, index) =>
      swapData(dir, index, baseData.dataList.value);
    const onUp = onMove.bind(null, -1);
    const onDown = onMove.bind(null, 1);

    return {
      ...baseData,
      isShowSetting,
      isShowSkin,
      onAdd,
      onDel,
      onUp,
      onDown,
    };
  },
};
</script>

<style scoped lang="less">
.experience {
  width: 100%;

  &__content {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    &__item {
      position: relative;
      padding: 0 4px 4px;
      border-right: 1px dashed lightgrey;
      &--1 {
        border-right: none;
      }

      &--2 {
        &:nth-child(2n) {
          border-right: none;
        }
      }

      &--3 {
        &:nth-child(3n) {
          border-right: none;
        }
      }

      &:hover {
        background: rgba(135, 206, 250, 0.3);
        .experience__content__item__operator {
          display: block;
        }
      }
      &__top--large {
        display: grid;
        grid-template-columns: 1fr 1fr;
        > *:nth-child(2) {
          grid-row: span 2;

          /deep/ textarea {
            text-align: end;
          }
        }
      }

      &__operator {
        position: absolute;
        left: -22px;
        top: 0;
        background: white;
        width: 15px;
        padding: 2px 2px;
        border: whitesmoke 1px solid;
        box-shadow: -5px 5px 5px whitesmoke;
        display: none;

        > * {
          display: block;
          font-size: 15px;
          cursor: pointer;
        }

        .resume-delete {
          color: red;
        }

        .resume-icon--activated {
          color: lightskyblue;
        }
      }
    }
  }
}
</style>
